<template>
  <el-form :inline="true" :model="searchParams" class="demo-form-inline">
    <el-form-item label="学员姓名">
      <el-input v-model="searchParams.user" placeholder="姓名" />
    </el-form-item>
    <el-form-item label="学员编号">
      <el-input v-model="searchParams.num" placeholder="学员编号" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="doSearch">
        <el-icon>
          <Search />
        </el-icon>
      </el-button>
    </el-form-item>
  </el-form>
  <el-button type="primary" class="studyAdd">
    <el-icon>
      <Plus />
    </el-icon>新增学员
  </el-button>
  <el-button class="studyWant">
    <el-icon>
      <Check />
    </el-icon>转为在学学员
  </el-button>
  <el-button class="studyEnd">
    <el-icon>
      <Check />
    </el-icon>结业
  </el-button>
  <el-table :data="now" style="width: 100%">
    <el-table-column width="50" props="lists">
      <el-checkbox name="type" />
    </el-table-column>
    <el-table-column prop="id" label="编号" width="70" />
    <el-table-column prop="studyName" label="学员姓名" />
    <el-table-column prop="icon" label="学员头像">
      <template #default="scope">
        <el-avatar :src="scope.row.icon" />
      </template>
    </el-table-column>
    <el-table-column prop="parentName" label="家长姓名" />
    <el-table-column prop="age" label="年龄" />
    <el-table-column prop="Price" label="费用/￥" />
    <el-table-column label="操作">
      <template #default>
        <el-button type="primary">查看</el-button>
        <el-button type="primary">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next,sizes,jumper" :current-page="page" :page-size="pageSize"
    @current-change="currentChange" @size-change="sizeChange" :total="total" />
</template>

<script>
// import axios from 'axios'
import { fetchStudy } from '@/api/wantPage'
export default {
  name: 'WantPage',
  data() {
    return {
      now: [],
      searchParams: {
        user: '',
        num: ''
      },
      pageSize: 10,
      page: 1,
      total: 0
    }
  },
  methods: {
    currentChange(page) {
      this.page = page
      this.fetchStudy()
    },
    sizeChange(pageSize) {
      this.pageSize = pageSize
      this.fetchStudy()
    },
    doSearch() {
      console.log(this.searchParams)
      this.fetchStudy()
    },
    fetchStudy() {
      fetchStudy({
        user: this.searchParams.user,
        num: this.searchParams.num,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
          console.log(res)
          this.now = res.data.data.lists
          this.total = res.data.data.total
        }
      })
    }
    // fetchStud() {
    //   axios.get('https://www.fastmock.site/mock/4edce0d607f964b0ebbe0ad1c87ed4de/api/nowPage').then(res => {
    // console.log(res)
    //   })
    // }
  },
  created() {
    // this.fetchStud()
    this.fetchStudy()
  }
}
</script>

<style lang="scss" scoped>
.el-icon {
  margin-right: 5px;
}

.studyAdd,
.studyWant,
.studyEnd {
  margin-bottom: 20px;
}

.el-pagination {
  margin-top: 15px;
}
</style>
